<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<audio id="music" src="http://testaudios.ixinghui.com/audio%2F1%2F57a14ab6-5258-11e7-9d7d-c81f66de52fe.mp3?e=1499916048&token=yPfF6O7F89b68iRvN5H9KZxRP3050NaG6XsaKUyP:4OrFVFtivPJT9MGVnlvtSXxu3WI=" controls="controls" preload="auto">
    Your browser does not support the audio element.
</audio>
<canvas id="canvas"></canvas>
<script>
    var music = document.getElementById('music');
    //绑定timeupdate事件
    music.addEventListener('timeupdate',function(){
        if (!isNaN(music.duration)) {
            var progressValue = music.currentTime/music.duration; //用时间比来获取进度条的值
            if(progressValue == 1){
                progressValue=0;//当播放完成，进度条跳到开始
            }
            drawCircle(canvas,progressValue);

        };
    },false);
    drawCircle = function (canvas, percentage) {
        var clientWidth = document.documentElement.clientWidth;
        var canvasWidth = Math.floor(clientWidth * 200 / 750);
        var innerR = canvasWidth * 0.8 * 0.5;//半径
        var ctx;
        canvas.setAttribute('width', canvasWidth + 'px');
        canvas.setAttribute('height', canvasWidth + 'px');
        if (canvas.getContext) {
            ctx = canvas.getContext('2d');
        }
        ctx.translate(canvasWidth / 2, canvasWidth / 2);
        ctx.beginPath();
        ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#F0F0F0";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, 0, innerR, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + percentage * Math.PI * 2), false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#EEBD44";
        ctx.stroke();
    };

    drawCircle(document.getElementById('canvas'),0);
</script>
</body>
</html>